<template>
  <view class="container">
    <!-- 状态栏 -->
    <view class="status-bar">
      <view class="status">{{ statusText }}</view>
      <view class="time">{{ formatDate(serviceDetail?.createTime) }}</view>
    </view>

    <!-- 服务信息 -->
    <view class="service-info">
      <view class="title">服务信息</view>
      <view class="info-item">
        <text class="label">服务类型</text>
        <text class="value">{{ serviceTypeText }}</text>
      </view>
      <view class="info-item">
        <text class="label">服务原因</text>
        <text class="value">{{ serviceDetail?.serviceReason }}</text>
      </view>
      <view class="info-item">
        <text class="label">问题描述</text>
        <text class="value">{{ serviceDetail?.serviceReason }}</text>
      </view>
    </view>

    <!-- 图片展示 -->
    <view class="images" v-if="serviceDetail?.serviceImages">
      <view class="title">问题图片</view>
      <view class="image-list">
        <image
          v-for="(image, index) in serviceDetail.serviceImages.split(',')"
          :key="index"
          :src="image"
          mode="aspectFill"
          @tap="previewImage(image)"
        />
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="title">订单信息</view>
      <view class="info-item">
        <text class="label">订单编号</text>
        <text class="value">{{ serviceDetail?.orderId }}</text>
      </view>
      <view class="info-item">
        <text class="label">申请时间</text>
        <text class="value">{{ formatDate(serviceDetail?.createTime) }}</text>
      </view>
    </view>

    <!-- 取消按钮 -->
    <view class="cancel-btn" v-if="serviceDetail?.serviceStatus === 'pending'" @tap="handleCancel">
      取消售后
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { formatDate } from '@/utils/date';
import type { API } from '@/backend/typings.d';
import { getAfterSalesServiceVoByIdUsingGet, cancelAfterSalesServiceUsingPost } from '@/backend/afterSalesServiceController';

const serviceDetail = ref<API.AfterSalesServiceVO | null>(null);

// 状态文本
const statusText = computed(() => {
  const statusMap: Record<string, string> = {
    pending: '待处理',
    processing: '处理中',
    completed: '已完成',
    rejected: '已拒绝',
    cancelled: '已取消'
  };
  return statusMap[serviceDetail.value?.serviceStatus || ''] || '未知状态';
});

// 服务类型文本
const serviceTypeText = computed(() => {
  const typeMap: Record<string, string> = {
    return: '退货',
    exchange: '换货',
    refund: '退款'
  };
  return typeMap[serviceDetail.value?.serviceType || ''] || '未知类型';
});

// 获取售后详情
const getServiceDetail = async (id: string) => {
  try {
    const res = await getAfterSalesServiceVoByIdUsingGet({
      id: parseInt(id)
    });
    
    if (res.code === 0 && res.data) {
      serviceDetail.value = res.data;
    } else {
      uni.showToast({
        title: res.message || '获取售后详情失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('获取售后详情失败:', error);
    uni.showToast({
      title: '获取详情失败',
      icon: 'none'
    });
  }
};

// 预览图片
const previewImage = (current: string) => {
  if (!serviceDetail.value?.serviceImages) return;
  
  const images = serviceDetail.value.serviceImages.split(',');
  
  uni.previewImage({
    current,
    urls: images,
    fail: () => {
      uni.showToast({
        title: '图片预览失败',
        icon: 'none'
      });
    }
  });
};

// 取消售后
const handleCancel = async () => {
  if (!serviceDetail.value?.id) return;
  
  try {
    const result = await new Promise<{confirm: boolean, cancel?: boolean}>((resolve) => {
      uni.showModal({
        title: '取消售后',
        content: '确定要取消该售后申请吗？',
        confirmText: '确定',
        cancelText: '取消',
        success: (res) => resolve(res),
        fail: () => resolve({confirm: false})
      });
    });

    if (!result.confirm) return;

    const res = await cancelAfterSalesServiceUsingPost({
      id: serviceDetail.value.id
    });
    
    if (res.code === 0) {
      uni.showToast({
        title: '取消成功',
        icon: 'success'
      });
      // 刷新详情
      if (serviceDetail.value.id) {
        await getServiceDetail(serviceDetail.value.id.toString());
      }
    } else {
      uni.showToast({
        title: res.message || '取消失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('取消售后失败:', error);
    uni.showToast({
      title: '取消失败',
      icon: 'none'
    });
  }
};

onLoad((options: any) => {
  if (options.id) {
    getServiceDetail(options.id);
  }
});
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.status-bar {
  background: linear-gradient(135deg, #ff9800, #ff5722);
  padding: 40rpx 32rpx;
  color: #fff;
  
  .status {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
  }
  
  .time {
    font-size: 24rpx;
    opacity: 0.8;
  }
}

.service-info,
.images,
.order-info {
  background-color: #fff;
  margin: 24rpx;
  padding: 32rpx;
  border-radius: 16rpx;
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 24rpx;
  }
}

.info-item {
  display: flex;
  margin-bottom: 24rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .label {
    width: 160rpx;
    color: #666;
    font-size: 28rpx;
  }
  
  .value {
    flex: 1;
    color: #333;
    font-size: 28rpx;
  }
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  
  image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 8rpx;
  }
}

.cancel-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  color: #ff5722;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style> 